<template>
  <div class='column'>
    <!-- 地图 -->
    <div class='map'>
      <div class="tools">
        <span :class="{'active': type === 1}" @click="changeMap(1)">地图</span>
        <!-- <span :class="{'active': type === 2}" @click="changeMap(2)">拓扑图</span> -->
        <span :class="{'active': type === 3}" @click="changeMap(3)">区域</span>
      </div>
      <transition name="fade">
        <map-chart v-show="type === 1" ref="mapRef" :pingEntityList="pingEntityList"/>
      </transition>
      <transition name="fade">
        <topology v-show="type === 2" ref="topologyRef"/>
      </transition>
      <transition name="fade">
        <area-chart v-show="type === 3" ref="areaRef"/>
      </transition>
      </div>
    <!-- 告警汇总 -->
    <div class='alarm panel wrapper legendWraper'>
      <div class='inner'>
        <div class='title'>
          <span class="icon"></span>
          <h3>Portal告警汇总</h3>
        </div>
        <div class='chart'>
          <bar-chart
            v-if="showAlarm"
            :showLegend="showLegend"
            :xData="portal_xData"
            :chartData="portal_chartData"
            :otherOptions="portal_option"
            :commonStyle="bar_style"
            @handleClick="handleAlarmClick"
          />
        </div>
        <!-- 图例 -->
        <div class="portalLegend">
          <ul>
            <li v-for="(item, index) in potralLegendData" :key="index">
              <i>!</i>
              <span style="font-size:13px">{{item}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <alarm-dialog ref="alarmDialog"/>
  </div>
</template>

<script>
import Topology from './components/topology'
import MapChart from './components/map'
import AreaChart from './components/area'
import mixins from '../mixins'
import AlarmDialog from '../dialog/alarmDialog'
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {}
    }
  },
  mixins: [mixins],
  data () {
    return {
      showAlarm: false,
      dialogVisible: false,
      pingEntityList: [],
      mapList: [],
      cityName: '',
      themeTitle: '',
      type: 1,
      showLegend: false,
      portal_xData: [0, 20, 40, 60, 80, 100],
      colorList: ['#53b584', '#6facef', '#5ab6d0', '#efab82', '#ce5c4e'],
      potralLegendData: [],
      portal_chartData: [
        {
          name: '',
          value: [
            {
              value: 20,
              itemStyle: {
                color: '#53b584'
              }
            },
            {
              value: 30,
              itemStyle: {
                color: '#6facef'
              }
            },
            {
              value: 56,
              itemStyle: {
                color: '#5ab6d0'
              }
            },
            {
              value: 89,
              itemStyle: {
                color: '#efab82'
              }
            }
          ]
        }
      ],
      portal_option: {
        grid: {
          top: '8%',
          left: '3%',
          right: '5%',
          bottom: '8%'
        },
        xAxis: {
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#485f65'
            }
          }
        },
        yAxis: {
          type: 'category',
          boundaryGap: true,
          data: ['提示', '低', '中', '高', '紧急'],
          axisLabel: {
            color: '#262626'
          },
          axisLine: {
            lineStyle: {
              color: '#9dada7'
            }
          }
        }
      },
      // 柱状图统一样式
      bar_style: {
        barMaxWidth: 15,
        itemStyle: {
          normal: {
            barBorderRadius: [0, 5, 5, 0]
          }
        }
      }
    }
  },
  components: {
    'BarChart': () => import('@/components/echarts/bar'),
    MapChart,
    Topology,
    AreaChart,
    AlarmDialog
  },
  created () {
    this.changeMap(1)
    let that = this
    this.$nextTick(() => {
      that.initData()
    })
  },
  methods: {
    initData () {
      if (JSON.stringify(this.chartData) !== '{}') {
        this.potralLegendData = []
        this.portal_chartData[0].value = []
        let data = this.chartData.portalAlarmDatas ? this.chartData.portalAlarmDatas : []
        for (let i = 0; i < data.length; i++) {
          this.potralLegendData.push(data[i].alarmNum)
          // 柱形图样式
          let str = {
            value: data[i].alarmNum,
            itemStyle: {
              color: this.colorList[i]
            }
          }
          this.portal_chartData[0].value.push(str)
        }
        this.potralLegendData = this.potralLegendData.reverse()
        if (this.portal_chartData[0].value.length > 0) {
          this.showAlarm = true
        }
        // 处理地图数据
        this.pingEntityList = this.chartData.pingEntityList
        // 处理地图数据
        const mapDate = this.chartData.pingEntityList.map(item => {
          return {
            name: item.toName,
            status: item.status,
            value: item.value
          }
        })
        let arrlist = []
        let arr = []
        mapDate.forEach(items => {
          arrlist = [{name: '贵阳'}, items]
          return arr.push(arrlist)
        })
        this.pingEntityList = arr
      }
    },
    changeMap (type) {
      this.type = type
      this.$nextTick(() => {
        if (type === 1) {
          this.$refs.mapRef.init()
        } else if (type === 2) {
          this.$refs.topologyRef.init()
        } else {
          this.$refs.areaRef.init()
        }
      })
    },
    handleAlarmClick (val) {
      this.$refs.alarmDialog.init(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
